<template>
    <div class="main">
        <h1>attribute绑定</h1>
        <ul>
            <li>:title 语法是 v-bind:title 的简写。</li>
            <li> 除了普通字符串之外，class 绑定还特别支持了对象和数组</li>
            <li>样式绑定也支持对象和数组</li>
        </ul>
        <p :title="message">
            当鼠标移动上来的时候，你会看到效果
        </p>
        <p :class="{ red: isRed }" @click="toggRed">
            当鼠标点击的时候颜色会发生变化
        </p>
        <p :style="{ color }" @click="toggeg">第三种方式改变</p>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const message = ref('helloword');
const isRed = ref(true)
function toggRed() {
    isRed.value = !isRed.value
}
const color = ref('green')
const toggeg = () => {
    color.value = color.value === 'green' ? 'blue' : 'green'
}

</script>
<style>
.main {
    width: 800px;
    margin: 50px auto;
}

.red {
    color: red;
}
</style>